<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令练习</title>
		<style type="text/css">
			/* 为属性设置隐藏 */
			[v-cloak]{
				display: none;/*display: block; 
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 1.指令练习
				当浏览器解析JS完成前,用户看到的数据是{{msg}},
				直到浏览器加载完成全部JS,则{{msg}}替换为具体的数据
				需求:不想让用户看到没有解析的数据,使用v-cloak属性
			 -->
			测试: v-cloak指令
			<h1 v-cloak>{{msg}}</h1>
			<hr >
			测试: v-text指令
			<!-- 2.v-text 将上述的v-cloak优化了 -->
			<h1 v-text="msg"></h1>
			<hr >
			测试: v-html指令
			<!-- 3.v-html 让浏览器解析html之后展现 -->
			<span v-html="html"></span>
			<hr >
			测试: v-pre指令
			<!-- 4.需求:只想展现{{msg}} 不需要vue解析
				   语法:v-pre vue直接跳过该标签不解析
			 -->
			 <br>
			 <span v-pre>{{msg}}</span>
			 <hr >
			 测试: v-once指令
			 <br>
			 <!-- 5.需求:元素直接洗一次 之后用户随意修改,数据不变 -->
			 <span v-once>{{one}}</span>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script type="text/javascript">
			//一般工作中字符串写法 提倡使用'单引号'
			const app = new Vue({
				el: "#app",
				data: {
					msg: '测试数据',
					html: '<h3>测试html语法</h3>',
					one: '数据只解析一次'
				}
			})
		</script>
		
	</body>
</html>
